<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>电影院</title>

<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
    <script src="./js/vue2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/areas.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script type="text/javascript" src="./js/qs.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <link rel="stylesheet" href="./css/common.d1d257d3.css">
    <link rel="stylesheet" href="./css/cinemas-list.0350856d.css">
    <link rel="stylesheet" href="./css/font.css">

</head>
<body>
<div id="app">
    <div class="header">
        <div class="header-inner">
            <a href="index.html" class="logo"></a>
            <div class="city-container" >
                <div class="city-selected">
                    <div class="city-name">
                        &nbsp;
                        <!--                        <span class="caret"></span>-->
                    </div>
                </div>
                <div class="city-list" >
                    <div class="city-list-header">定位城市：<a class="js-geo-city">上海</a></div>
                </div>
            </div>

            <div class="nav">
                <ul class="navbar">
                    <li><a href="index.html" >首页</a></li>
                    <li><a href="movie.html" >电影</a></li>
                    <li><a href="cinema.html"  class="active">影院</a></li>
                    <li><a href="dashboard_websocket.html">榜单</a></li>
                </ul>
            </div>

            <div class="user-info" v-if="islogin">
                <div class="user-avatar has-login">
                    <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
                    <span class="caret"></span>
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="./orderlist.html">我的订单</a></li>
                        <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
                        <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <div class="user-info" v-if="!islogin">
                <div class="user-avatar J-login">
                    <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
                    <span class="caret"></span>
                    <ul class="user-menu no-login-menu">
                        <li><a href="javascript:void(0)" @click="login">登录</a></li>
                    </ul>
                </div>
            </div>

            <form target="_blank" class="search-form" >
                <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
                       autocomplete="off">
                <input class="submit" type="button"  @click="doSearch"/>
            </form>


        </div>
    </div>
    <div class="header-placeholder"></div>

    <div class="container">
        <div class="tags-panel">
            <ul class="tags-lines">
                <li class="tags-line" data-type="brand">
                    <div class="tags-title">品牌:</div>
                    <ul class="tags">
                        <li :class="{active:0==selectedBrandId}" @click="queryCinemaByBrand($event,0)">
                            <a href="javascript:void(0)">全部</a>
                        </li>
                        <li :class="{active:brand.brandId==selectedBrandId}" v-for="brand in brandList"
                            :key="brand.brandId"
                            @click="queryCinemaByBrand($event,brand.brandId)">
                            <a href="javascript:void(0)">{{brand.brandName}}</a>
                        </li>

                    </ul>
                </li>
                <li class="tags-line tags-line-border" >
                    <div class="tags-title">行政区:</div>
                    <ul class="tags">
                        <li :class="{active:selectedAreaId==0}" @click="queryCinemaByArea($event,0)">
                            <a href="javascript:void(0)">全部</a>
                        </li>
                        <li :class="{active:selectedAreaId==areaObj.id}" v-for="areaObj in cinemaAreaList"
                            :key="areaObj.id"
                            @click="queryCinemaByArea($event,areaObj.id)">
                            <a href="javascript:void(0)">{{areaObj.name}}</a>
                        </li>
                    </ul>
                </li>
                <li class="tags-line tags-line-border">
                    <div class="tags-title">特殊厅:</div>
                    <ul class="tags">
                        <li :class="{active:selectedHallTypeId==0}" @click="queryCinemaByHallType($event,0)">
                            <a href="javascript:void(0)">全部</a>
                        </li>
                        <li :class="{active:selectedHallTypeId==hallType.htId}" v-for="hallType in hallTypeList"
                            :key="hallType.htId"
                            @click="queryCinemaByHallType($event,hallType.htId)">
                            <a href="javascript:void(0)">{{hallType.htName}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <div class="cinemas-list">
            <h2 class="cinemas-list-header">
                <span>影院列表</span>
            </h2>
            <div class="cinema-cell" v-for="cinema in cinemaList" :key="cinema.cinemaId">
                <div class="cinema-info">
                    <a href="javascript:void(0)" class="cinema-name" @click="queryMovieListByCinema(cinema.cinemaId)">{{cinema.cinemaName}}</a>
                    <p class="cinema-address">地址：{{cinema.cinemaLocation}}</p>
                    <p class="cinema-tags-item">{{cinema.hallTypeStr}}</p>

                </div>
                <div class="buy-btn">
                    <a href="javascript:void(0)" @click="queryMovieListByCinema(cinema.cinemaId)">选座购票</a>
                </div>
                <div class="price">
                    <span class="rmb red">￥</span>
                    <span class="price-num red stonefont">50</span>
<!--                    <span class="price-num red"><span class="stonefont"></span></span>-->
                    <span>起</span>
                    <span class="cinema-distance">1km</span>
                </div>
            </div>
        </div>
    </div>

    <div class="cinema-pager">
        <ul class="list-pager">
            <li :class="{active:selectedPage==page}" v-for="page in pagesList" :key="page">
                <a class="page_1" href="javascript:void(0);" @click="gotoPage(page)"
                   style="cursor: pointer">{{page}}</a>
            </li>
        </ul>
    </div>

</div>

<div class="footer" style="visibility: visible;">

</div>

</div>
</body>


<script>
    let vm = new Vue({
        el: "#app",//绑定，告知vue负责管理页面的哪个部分
        data: {
            islogin:false,
            queryParams: {
                pageNum: 1, //当前页码
                pageSize: 3, //每一页记录数
                cinemaBrand: 0, //电影院品牌
                cinemaArea: 0,  //电影院所在地区
                hallType: 0,  //影厅的类型
                orderByColumn: undefined,  //排序字段
                isAsc: undefined //升序或者降序
            },
            //影院列表
            cinemaList: [
                {"cinemaId":4,"cinemaName":"万达影城(松江店)","cinemaPhone":"6536222","cinemaArea":2715,"cinemaLocation":"广富林路692号松江万达广场4楼"},
                {"cinemaId":4,"cinemaName":"万达影城(松江店)","cinemaPhone":"6536222","cinemaArea":2715,"cinemaLocation":"广富林路692号松江万达广场4楼"},
                {"cinemaId":4,"cinemaName":"万达影城(松江店)","cinemaPhone":"6536222","cinemaArea":2715,"cinemaLocation":"广富林路692号松江万达广场4楼"},
                {"cinemaId":4,"cinemaName":"万达影城(松江店)","cinemaPhone":"6536222","cinemaArea":2715,"cinemaLocation":"广富林路692号松江万达广场4楼"}
            ],
            //影厅类型列表
            hallTypeList: [
                {"htId":1,"htName":"4D厅"},
                {"htId":1,"htName":"4D厅"},
                {"htId":1,"htName":"4D厅"},
                {"htId":1,"htName":"4D厅"},
            ],
            //电影地区列表
            cinemaAreaList: [
                {"id":1,"name":"松江区"},
                {"id":1,"name":"松江区"},
                {"id":1,"name":"松江区"}
            ],
            //影院品牌列表
            brandList: [
                {"brandId":1,"brandName":"星美国际影城"},
                {"brandId":1,"brandName":"星美国际影城"},
                {"brandId":1,"brandName":"星美国际影城"},
                {"brandId":1,"brandName":"星美国际影城"},
            ],
            selectedBrandId: 0,//被选中的品牌id
            selectedAreaId: 0,//被选中的行政区id
            selectedHallTypeId: 0,//被选中的影厅类型id
            selectedPage: 1,//当前被选中的页码
            pagesList: [1,2,3,4,5,6],//分页页码列表
            movieId:-1,//如果是从电影详情页面点击特惠购票跳转过来的就会有movieId
            searchKey:'', //搜索关键字
            fareMoney:10 //电影票价格
        },
        methods: {
            //搜索
            /**
             * url:search.html
             * method:get
             * param: searchKey
             * url使用encodeURI编码,例如：encodeURI("search.html?searchKey=万达")
             */
            doSearch() {
                location.href=encodeURI("search.html?searchKey="+this.searchKey)
            },
            //获取所有的影厅类型
            /**
             * url:cinema/cinema/halltype/list
             * method: get
             * param: pageNum=1
             * param: pageSize=100
             * return: 返回列表赋值给 hallTypeList
             */
            loadHallTypeList() {
                axios({
                    url:'cinema/web/cinema/hallytpe/list',
                    method:'get',
                    params:{
                        pageNum:1,
                        pageSize:1000
                    }
                }).then(res=>{
                    this.hallTypeList =res.rows
                })
            },
            //获取所有的品牌
            /**
             * url:cinema/cinema/brand/list
             * method: get
             * param: pageNum=1
             * param: pageSize=100
             * return: 返回列表赋值给 brandList
             */
            loadHallBrandList() {
                axios({
                    url:'cinema/web/cinema/brand/list',
                    method:'get',
                    params:{
                        pageNum:1,
                        pageSize:1000
                    }
                }).then(res=>{
                    this.brandList =res.rows
                })
            },
            //初始化行政区列表，目前是从areas.js中获取数据
            //循环areas列表，取出area.type=3(代表第三级行政区) 并且 area.parentId=321(代表上海),
            // 放入列表中显示cinemaAreaList
            // this.cinemaAreaList.push({"id":area.id,"name":area.name})
            loadAreaList() {
                this.cinemaAreaList = []
                for(let a of areas){
                    if(a.type==3 && a.parentId==321){
                        this.cinemaAreaList.push({"id":a.id,"name":a.name})
                    }
                }
            },
            //根据品牌查询
            /**
             * 1. 把选中的品牌id赋值给this.selectedBrandId,记录一下被选中的品牌id
             * 2. 把选中的品牌id赋值给this.queryParams.cinemaBrand，用于向服务端提交请求的参数
             * 3. 调用this.loadCinemas()向服务端发起请求，根据条件获取电影院列表
             */
            queryCinemaByBrand(event, brandId) {
                this.selectedBrandId = brandId;
                this.queryParams.cinemaBrand = brandId
                this.loadCinemas()

            },
            //根据地区查询
            /**
             * 1. 把选中的地区id赋值给this.selectedAreaId,记录一下被选中的品牌id
             * 2. 把选中的地区id赋值给this.queryParams.cinemaArea，用于向服务端提交请求的参数
             * 3. 调用this.loadCinemas()向服务端发起请求，根据条件获取电影院列表
             */
            queryCinemaByArea(event, areaId) {
                this.selectedAreaId = areaId;
                this.queryParams.cinemaArea = areaId
                this.loadCinemas()
            },
            //根据影厅类型查询
            /**
             * 1. 把选中的影厅类型id赋值给this.selectedHallTypeId,记录一下被选中的品牌id
             * 2. 把选中的影厅类型id赋值给this.queryParams.hallType，用于向服务端提交请求的参数
             * 3. 调用this.loadCinemas()向服务端发起请求，根据条件获取电影院列表
             */
            queryCinemaByHallType(event, hallType) {
                this.selectedHallTypeId = hallType;
                this.queryParams.hallType = hallType
                this.loadCinemas()

            },
            //跳转到影院详情页面
            //--根据电影院id跳转到影院详情页面（展示影院的信息，以及当前影院正在播放的影片的排片计划列表）
            //--注意：有可能从其他页面带着电影id跳转到电影院列表页面，那么，此时，电影id会在当前页面，跳转到影院详情页面需要把movieId也传过去
            /**
             * param: 电影院id
             * 1. 判断当前页面url中的movieId是否大于0，如果大于0，说明是从电影详情页面跳转过来的，那么现在跳转到影院详情页面要带上movieId
             *     cinemadetail.html?cinemaId=" + cinema_id+"&movieId="+this.movieId
             * 2. 如果当前页面中的movieId小于等于0，或者为空，那么跳转到影院详情页面不需要带着movieId
             *    location.href = "cinemadetail.html?cinemaId=" + cinema_id
             */
            queryMovieListByCinema(cinema_id) {

                if(this.movieId > 0){
                    location.href = "cinemadetail.html?cinemaId=" + cinema_id+"&movieId="+this.movieId
                }else{
                    location.href = "cinemadetail.html?cinemaId=" + cinema_id
                }
            },
            //加载电影院列表
            /**
             * url: cinema/cinema/cinema/list
             * method: get
             * param: this.queryParams
             * return:
             *   响应函数中
             *     1. 把返回的列表赋值给cinemaList
             *     2. 把分页数组赋值给 pagesList = res.pageInfo.navigatepageNums
             */
            loadCinemas() {
                axios({
                    url:'cinema/web/cinema/cinema/list',
                    method:'get',
                    params:this.queryParams
                }).then(res=>{
                    this.cinemaList =res.rows
                    this.pagesList = res.pageInfo.navigatepageNums
                    console.log('loadCinemas',res)
                })

            },
            //跳转到下一页
            /**
             * 1. 把需要跳转的页码赋值给this.selectedPage
             * 2. this.queryParams.pageNum
             * 3. 调用this.loadCinemas()从服务端根据分页条件加载电影院列表
             */
            gotoPage(pg) {
                this.selectedPage=pg;
                this.queryParams.pageNum=pg;
                this.loadCinemas();
            },
            logout(){
                removeToken()
                localStorage.removeItem("user_cellphone")
                location.href="index.html"
            },
            login(){
                location.href='login.html'
            },
            checkIsLogin(){
                if(getToken()){
                    this.islogin=true;
                }
            }
        },
        /**
         * 1. 从当前页面的url中获取movieId参数的值，保存到this.movieId
         *   --如果url没有url传过来，把this.movieId设置为-1
         * 3. 调用this.loadHallTypeList()加载影厅类型列表
         * 4. 调用this.loadAreaList()加载地区列表
         * 5. 调用this.loadHallBrandList()加载品牌列表
         * 6. 调用this.loadCinemas()加载电影院列表
         */
        created() {
            this.checkIsLogin()
            let mid=GetQueryString('movieId')
            if(mid){
                this.movieId=mid
            }
            this.loadHallTypeList();
            this.loadAreaList();
            this.loadHallBrandList();
            this.loadCinemas();
        }
    })
</script>

</html>
